import React, { Component } from 'react';
import { Layout } from 'antd';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import SiderCustom from './components/SiderCustom';
import HeaderCustom from './components/HeaderCustom';
import { responsiveChange } from './redux/actions/responsive';
import Routes from './routes';

const { Content } = Layout;

class App extends Component {
  state = {
    collapsed: false,
  };

  componentWillMount() {
    // const { receiveData } = this.props;
    // const user = JSON.parse(localStorage.getItem('user'));
    // user && receiveData(user, 'auth');

    // fetchData({funcName: 'admin', stateName: 'auth'});

    // this.getClientWidth();
    // window.onresize = () => {
    //   this.getClientWidth();
    // }
  }

  getClientWidth = () => { // 获取当前浏览器宽度并设置responsive管理响应式
    const { responsiveChange } = this.props;
    const clientWidth = window.innerWidth;
    const isMobile = clientWidth <= 992;
    responsiveChange(isMobile);
  };
  toggle = () => {
    this.setState({
      collapsed: !this.state.collapsed,
    });
  };
  render() {
    const { auth, isMobile } = this.props;
    return (
      <Layout>
        {!isMobile && <SiderCustom collapsed={this.state.collapsed} />}
        <Layout style={{ flexDirection: 'column' }}>
          <HeaderCustom toggle={this.toggle} collapsed={this.state.collapsed} user={auth.data || {}} />
          <Content style={{ margin: '0 16px', overflow: 'initial', flex: '1 1 0' }}>
            <Routes auth={auth} />
          </Content>
        </Layout>
      </Layout>
    );
  }
}

const mapStateToProps = (state, ownProps) => ({
  isMobile: state.responsive.isMobile || false,
  auth: { data: {} },
});

// const mapDispatchToProps = dispatch => ({
//   actions: bindActionCreators(
//     {
//       responsiveChange,
//     },
//     dispatch,
//   ),
// });

const mapDispatchToProps = dispatch => ({
  responsiveChange: bindActionCreators(responsiveChange, dispatch)
});

export default connect(mapStateToProps, mapDispatchToProps)(App);
